<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.tmpl.js"></script>
    <script type="text/javascript" src="js/knockout-3.4.2.js"></script>
</head>
<body>
<div>
    <!--姓名：<label id="lb_name" data-bind="text:Name"></label><br />-->
    <!--职业：<input type="text" data-bind="textinput:Profession"/>-->

    <!--Observables：监控属性-->
    <!--姓名：<label data-bind="text:Name"></label><br />-->
    <!--职业：<input type="text" data-bind="textinput:Profession" />-->

    <!--DependentObservables-->
    <!--姓名：<input type="text" data-bind="textinput:Name"/><br/>-->
    <!--职业：<input type="text" data-bind="textinput:Profession"/><br/>-->
    <!--描述：<label data-bind="text:Des"></label>-->

    <!--ObservableArray-->
    <div>
        <select data-bind="options:deptArr,optionsText:'Name'"></select>
    </div>
    <div>
        <input type="text" id="txt_testobservable"/><input type="button" id="btn_test" value="新增部门"/>
    </div>
</div>
<!--<div>-->
<!--<input type="text" id="txt_testobservable">-->
<!--</div>-->
<!--<script type="text/javascript">-->
    <!--//1.定义ViewModel-->
    <!--//    var myViewModel = {-->
    <!--//        Name: "Lilei",-->
    <!--//        Profession:"软件工程师",-->
    <!--//    };-->
    <!--//    var myViewModel = {-->
    <!--//        Name: ko.observable("Lilei"),-->
    <!--//        Profession: "软件工程师",-->
    <!--//    };-->

    <!--//1.定义ViewModel-->
    <!--var myViewModel = {-->
        <!--Name: ko.observable("Lilei"),-->
        <!--Profession: ko.observable("软件工程师"),-->
    <!--};-->

    <!--//2.激活绑定-->
    <!--//ko.applyBindings(myViewModel);-->
    <!--//ko.applyBindings(myViewModel,document.getElementById("lb_name"));-->

    <!--myViewModel.Des = ko.dependentObservable(function () {-->
        <!--return "本人姓名——" + myViewModel.Name() + "，职业——" + myViewModel.Profession();-->
    <!--});-->

    <!--//2.激活绑定-->
    <!--ko.applyBindings(myViewModel);-->
    <!--//    $(function () {-->
    <!--//        //注册文本框的textchange事件-->
    <!--//        $("#txt_testobservable").on("input", function () {-->
    <!--//            myViewModel.Name($(this).val());-->
    <!--//        });-->
    <!--//    });-->
<!--</script>-->
<!--ObservableArray-->
<script type="text/javascript">
    var deptArr = ko.observableArray([
        {id: 1, Name: '研发部'},
        {id: 2, Name: '行政部'},
        {id: 3, Name: '人事部'}
    ]);
    var viewModel = {
        deptArr: deptArr,
    };

    ko.applyBindings(viewModel);

    var i = 4;
    $(function () {
        $("#btn_test").on("click", function () {
            deptArr.push({id: i++, Name: $("#txt_testobservable").val()});
        });
    });
</script>
</body>
</html>